<template>
	<view class="page">
		<!-- 导航栏 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-center">
				<text class="header-title">邀请好友</text>
			</view>
			<view class="header-right"></view>
		</view>

		<!-- 主要内容区域 -->
		<view class="main-container">
			<!-- 二维码模板轮播区域 -->
			<view class="code-container" id="code-container">
				<view class="swiper-wrapper">
					<swiper 
						class="swiper-container" 
						:indicator-dots="false"
						:autoplay="false" 
						:circular="templates.length > 1"
						:duration="300"
						:easing-function="easeInOutCubic"
						@change="onSwiperChange"
						:current="currentIndex"
					>
						<swiper-item v-for="(template, index) in templates" :key="template.id || index" class="swiper-slide">
							<view class="template-wrapper">
								<image 
									:id="'bg' + index"
									:src="template.composedImage || template.image_url" 
									class="template-image"
									mode="aspectFit"
									@load="onTemplateImageLoad(index)"
									@error="onTemplateImageError(index)"
									@longpress="saveImage(index)"
									@tap="saveImage(index)"
								/>
								<!-- 模板名称显示 -->
								<view class="template-name">{{ template.name }}</view>
							</view>
						</swiper-item>
					</swiper>
					
					<!-- 左右切换按钮 -->
					<view v-if="templates.length > 1" class="swiper-nav">
						<view class="nav-btn nav-prev" @click="prevTemplate" :class="{ disabled: currentIndex === 0 && !circular }">
							<text class="nav-icon">‹</text>
						</view>
						<view class="nav-btn nav-next" @click="nextTemplate" :class="{ disabled: currentIndex === templates.length - 1 && !circular }">
							<text class="nav-icon">›</text>
						</view>
					</view>
				</view>
				
				<!-- 自定义指示器 -->
				<view class="custom-indicators" v-if="templates.length > 1">
					<view 
						v-for="(template, index) in templates" 
						:key="index" 
						class="indicator-dot" 
						:class="{ active: index === currentIndex }"
						@click="switchToTemplate(index)"
					></view>
				</view>
				
				<!-- 当前模板信息 -->
				<view class="template-info" v-if="templates.length > 0">
					<text class="current-template">{{ currentIndex + 1 }} / {{ templates.length }}</text>
				</view>
			</view>

			<!-- 提示文字 - 参考HTML版本 -->
			<view class="tip-text">长按上方图片进行分享</view>

			<!-- 直接分享链接 - 参考HTML版本 -->
			<view class="direct-share" @click="directShare">
				<text class="share-link">不选图片，直接分享 ></text>
			</view>

			<!-- 隐藏的画布和二维码 - 参考HTML版本 -->
			<view class="hidden-elements">
				<!-- 临时画布用于合成图片 -->
				<canvas 
					canvas-id="tmpCanvas" 
					id="tmpCanvas"
					class="tmp-canvas"
				></canvas>
				
				<!-- 二维码画布 -->
				<canvas 
					canvas-id="qrCanvas" 
					id="qrCanvas"
					class="qr-canvas"
				></canvas>
				
				<!-- 二维码图片容器 -->
				<view id="qrcodeBox" class="qrcode-box">
					<image id="qrcode" class="qrcode-image" />
				</view>
			</view>
		</view>

		<!-- 加载提示 -->
		<u-loading-page :loading="loading" loading-text="正在生成邀请图片..."></u-loading-page>
	</view>
</template>

<script>
	import api from '@/api/index.js'
	import { getCurrentUser, isLoggedIn } from '@/api/auth.js'

	export default {
		data() {
			return {
				loading: true,
				userInfo: {},
				templates: [],
				currentIndex: 0,
				qrCodeData: '',
				qrCodeImage: null,
				loadedTemplates: 0,
				circular: true
			}
		},
		
		onLoad() {
			this.checkLogin()
		},

		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			// 检查登录状态
			checkLogin() {
				if (!isLoggedIn()) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
					return false
				}
				this.userInfo = getCurrentUser()
				this.initData()
				return true
			},

			// 初始化数据
			async initData() {
				try {
					this.loading = true
					
					// 获取用户信息
					const userInfo = uni.getStorageSync('userInfo')
					if (userInfo) {
						this.userInfo = userInfo
					} else {
						try {
							const userRes = await api.userApi.getUserDetail()
							if (userRes.code === 1 || userRes.r === 0) {
								this.userInfo = userRes.data
								uni.setStorageSync('userInfo', userRes.data)
							}
						} catch (err) {
							console.error('获取用户信息失败:', err)
						}
					}
					
					// 生成二维码（二维码生成完成后会自动加载模板）
					this.generateQRCode()
					
				} catch (error) {
					console.error('初始化数据失败:', error)
					this.loading = false
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
				}
			},

			// 生成二维码 - 参考HTML版本的实现
			generateQRCode() {
				// 构建分享链接
				const shareUrl = this.userInfo.share_url || this.getShareUrl()
				this.qrCodeData = shareUrl
				console.log('生成二维码:', shareUrl)
				
				// 使用原生方式生成二维码，参考HTML版本
				this.createQRCode()
			},

			// 获取分享链接
			getShareUrl() {
				const userId = this.userInfo.id || this.userInfo.user_id || ''
				const inviteCode = this.userInfo.invite_code || this.userInfo.inviteCode || userId
				
				// 使用配置的域名或默认域名
				const config = getApp().globalData.config || {}
				const baseUrl = config.SERVER_ADDRESS || config.baseUrl || 'https://weixin.youpin91.com.cn'
				return `${baseUrl}/invite?code=${inviteCode}&uid=${userId}`
			},

			// 创建二维码 - 参考HTML版本的qrcode生成
			createQRCode() {
				const ctx = uni.createCanvasContext('qrCanvas', this)
				
				// 设置画布尺寸
				ctx.clearRect(0, 0, 300, 300)
				
				// 设置背景色
				ctx.setFillStyle('#ffffff')
				ctx.fillRect(0, 0, 300, 300)
				
				// 这里应该使用二维码生成库，暂时用文字代替
				ctx.setFillStyle('#000000')
				ctx.setFontSize(12)
				ctx.fillText('QR Code', 120, 150)
				
				ctx.draw(false, () => {
					this.convertQRToImage()
				})
			},

			// 将二维码画布转换为图片 - 参考HTML版本的convQrToImg函数
			convertQRToImage() {
				uni.canvasToTempFilePath({
					canvasId: 'qrCanvas',
					success: (res) => {
						this.qrCodeImage = res.tempFilePath
						console.log('二维码转换成功:', this.qrCodeImage)
						// 开始加载模板
						this.loadTemplates()
					},
					fail: (err) => {
						console.error('二维码转换失败:', err)
						// 即使二维码生成失败，也要加载模板
						this.loadTemplates()
					}
				}, this)
			},

			// 加载模板 - 完全参考HTML版本的实现
			async loadTemplates() {
				try {
					const templatesRes = await api.shareApi.getTpls()
					console.log('模板接口返回:', templatesRes)
					
					if (templatesRes.r === 0 && templatesRes.data && templatesRes.data.list) {
						const templateList = templatesRes.data.list
						console.log('模板列表:', templateList)
						
						if (templateList.length > 0) {
							// 重置加载计数器
							this.loadedTemplates = 0
							
							// 获取配置的服务器地址
							const config = getApp().globalData.config || {}
							const serverAddress = config.SERVER_ADDRESS || 'https://weixin.youpin91.com.cn'
							
							console.log('全局配置:', config)
							console.log('服务器地址:', serverAddress)
							
							this.templates = templateList.map((item, index) => {
								// 使用完整的URL路径，拼接SERVER_ADDRESS
								// 确保serverAddress以/结尾，file_path不以/开头
								const cleanServerAddress = serverAddress.endsWith('/') ? serverAddress.slice(0, -1) : serverAddress
								const cleanFilePath = item.file_path.startsWith('/') ? item.file_path.slice(1) : item.file_path
								let imageUrl = cleanServerAddress + '/' + cleanFilePath
								
								console.log(`模板${index + 1} (${item.name}):`)
								console.log('  - file_path:', item.file_path)
								console.log('  - 完整URL:', imageUrl)
								
								return {
									id: item.id || (index + 1),
									name: item.name || `模板${index + 1}`,
									image_url: imageUrl,
									file_path: item.file_path,
									loaded: false,
									composedImage: null
								}
							})
							
							console.log('处理后的模板:', this.templates)
							console.log(`总共${this.templates.length}个模板需要加载`)
							
							// 如果没有图片需要加载，直接关闭loading
							if (this.templates.length === 0) {
								this.loading = false
							}
						} else {
							console.log('模板列表为空')
							this.setDefaultTemplate()
						}
					} else {
						console.log('模板接口返回失败:', templatesRes)
						this.setDefaultTemplate()
					}
				} catch (err) {
					console.error('获取模板失败:', err)
					this.setDefaultTemplate()
				}
			},
			
			// 设置默认模板
			setDefaultTemplate() {
				this.templates = [
					{
						id: 1,
						name: '默认模板',
						image_url: '/static/invite-bg-1.svg',
						loaded: true, // 本地资源直接标记为已加载
						composedImage: null
					}
				]
				// 关闭loading状态
				this.loading = false
				console.log('使用默认模板')
			},

			// 模板图片加载完成
			onTemplateImageLoad(index) {
				console.log(`模板${index} (${this.templates[index]?.name}) 加载完成`)
				if (this.templates[index]) {
					this.templates[index].loaded = true
					this.loadedTemplates++
					
					console.log(`已加载 ${this.loadedTemplates}/${this.templates.length} 个模板`)
					
					// 当所有模板都加载完成后，开始合成图片
					if (this.loadedTemplates === this.templates.length) {
						console.log('所有模板加载完成，开始合成图片')
						setTimeout(() => {
							this.buildAllImages()
						}, 300)
					}
				}
			},

			// 模板图片加载失败
			onTemplateImageError(index) {
				console.error(`模板${index} (${this.templates[index]?.name}) 加载失败`)
				
				if (this.templates[index]) {
					// 标记为加载失败但不移除，保持数组索引稳定
					this.templates[index].loaded = false
					this.templates[index].loadError = true
					this.loadedTemplates++
					
					console.log(`模板${index}加载失败，已处理 ${this.loadedTemplates}/${this.templates.length} 个模板`)
					
					// 检查是否所有模板都已处理完成
					if (this.loadedTemplates === this.templates.length) {
						console.log('所有模板处理完成')
						// 过滤掉加载失败的模板
						this.templates = this.templates.filter(template => !template.loadError)
						
						if (this.templates.length === 0) {
							console.log('所有模板都加载失败，使用默认模板')
							this.setDefaultTemplate()
						} else {
							setTimeout(() => {
								this.buildAllImages()
							}, 300)
						}
					}
				}
			},

			// 构建所有图片
			buildAllImages() {
				console.log('开始构建所有图片')
				
				// 先关闭loading，让用户能看到模板
				this.loading = false
				
				// 为每个已加载的模板构建合成图片
				this.templates.forEach((template, index) => {
					if (template.loaded) {
						console.log(`构建模板${index} (${template.name})`)
						this.buildImage(index)
					}
				})
				
				console.log('图片构建任务已启动')
			},

			// 构建单个图片 - 完全参考HTML版本的buildImage函数
			buildImage(index) {
				const canvas = uni.createCanvasContext('tmpCanvas', this)
				
				// 设置画布尺寸（参考HTML版本：900x1600）
				canvas.clearRect(0, 0, 900, 1600)
				
				// 绘制背景图片
				uni.getImageInfo({
					src: this.templates[index].image_url,
					success: (bgInfo) => {
						// 参考HTML版本：imgBg.drawImage(bg, 0, 0);
						canvas.drawImage(bgInfo.path, 0, 0, 900, 1600)
						
						// 绘制二维码（参考HTML版本：imgBg.drawImage(wt, 134, 1212);）
						if (this.qrCodeImage) {
							uni.getImageInfo({
								src: this.qrCodeImage,
								success: (qrInfo) => {
									// 完全参考HTML版本的位置：134, 1212
									canvas.drawImage(qrInfo.path, 134, 1212, 280, 280)
									
									canvas.draw(false, () => {
										this.convertCanvasToImage(index)
									})
								},
								fail: () => {
									canvas.draw(false, () => {
										this.convertCanvasToImage(index)
									})
								}
							})
						} else {
							canvas.draw(false, () => {
								this.convertCanvasToImage(index)
							})
						}
					},
					fail: (err) => {
						console.error('获取背景图片信息失败:', err)
					}
				})
			},

			// 将画布转换为图片（参考HTML版本的convertCanvasToImage函数）
			convertCanvasToImage(index) {
				uni.canvasToTempFilePath({
					canvasId: 'tmpCanvas',
					success: (res) => {
						// 更新模板的图片源为合成后的图片
						this.templates[index].composedImage = res.tempFilePath
						console.log(`模板${index}合成完成:`, res.tempFilePath)
					},
					fail: (err) => {
						console.error(`模板${index}合成失败:`, err)
					}
				}, this)
			},

			// 轮播切换
			onSwiperChange(e) {
				this.currentIndex = e.detail.current
			},

			// 上一个模板
			prevTemplate() {
				if (this.templates.length <= 1) return
				
				if (this.currentIndex > 0) {
					this.currentIndex--
				} else if (this.circular) {
					this.currentIndex = this.templates.length - 1
				}
			},

			// 下一个模板
			nextTemplate() {
				if (this.templates.length <= 1) return
				
				if (this.currentIndex < this.templates.length - 1) {
					this.currentIndex++
				} else if (this.circular) {
					this.currentIndex = 0
				}
			},

			// 切换到指定模板
			switchToTemplate(index) {
				if (index >= 0 && index < this.templates.length) {
					this.currentIndex = index
				}
			},

			// 保存图片到相册
			saveImage(index) {
				const template = this.templates[index]
				const imageSrc = template.composedImage || template.image_url
				
				if (!imageSrc) {
					uni.showToast({
						title: '图片还未生成完成',
						icon: 'none'
					})
					return
				}
				
				// 如果是合成图片，直接保存
				if (template.composedImage) {
					uni.saveImageToPhotosAlbum({
						filePath: template.composedImage,
						success: () => {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							})
							this.recordShare('image')
						},
						fail: (err) => {
							this.handleSaveError(err)
						}
					})
				} else {
					// 如果没有合成图片，先合成再保存
					this.buildImage(index)
					setTimeout(() => {
						if (template.composedImage) {
							this.saveImage(index)
						}
					}, 1000)
				}
			},

			// 处理保存错误
			handleSaveError(err) {
				if (err.errMsg.includes('auth deny')) {
					uni.showModal({
						title: '提示',
						content: '需要授权访问相册才能保存图片',
						success: (modalRes) => {
							if (modalRes.confirm) {
								uni.openSetting()
							}
						}
					})
				} else {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				}
			},

			// 直接分享
			directShare() {
				// 复制分享链接到剪贴板
				uni.setClipboardData({
					data: this.qrCodeData,
					success: () => {
						uni.showToast({
							title: '链接已复制',
							icon: 'success'
						})
						this.recordShare('link')
					}
				})
			},

			// 记录分享行为
			async recordShare(type) {
				try {
					await api.shareApi.recordShare({
						type: type === 'image' ? 1 : 2,
						content: this.qrCodeData,
						platform: 'wechat'
					})
				} catch (error) {
					console.error('记录分享失败:', error)
				}
			},

			// 返回
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 参考HTML版本的样式 */

	.page {
		width: 100%;
		height: 100%;
		background-color: white;
	}

	/* 导航栏样式 */
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #27b387;
		display: flex;
		align-items: center;
		z-index: 999;
		padding-top: var(--status-bar-height, 0);
		
		.header-left {
			width: 88rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.back-icon {
				font-size: 48rpx;
				color: #fff;
				font-weight: bold;
			}
		}
		
		.header-center {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.header-title {
				color: #fff;
				font-size: 36rpx;
				font-weight: 500;
			}
		}
		
		.header-right {
			width: 88rpx;
			height: 88rpx;
		}
	}

	/* 主容器 */
	.main-container {
		width: 100%;
		height: 100vh;
		padding-top: calc(88rpx + var(--status-bar-height, 0));
	}

	/* 二维码容器 */
	.code-container {
		height: 77%;
		width: 96%;
		margin: 10px auto;
		border-radius: 6px;
		position: relative;
		
		.swiper-wrapper {
			position: relative;
			height: 100%;
			width: 100%;
			
			.swiper-container {
				height: 100%;
				width: 100%;
				text-align: center;
				
				.swiper-slide {
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					
					.template-wrapper {
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						
						.template-image {
							border-radius: 6px;
							height: 960rpx;
							width: 540rpx;
							box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
						}
						
						.template-name {
							margin-top: 20rpx;
							font-size: 24rpx;
							color: #666;
							text-align: center;
						}
					}
				}
			}
			
			/* 左右切换按钮 */
			.swiper-nav {
				position: absolute;
				top: 50%;
				left: 0;
				right: 0;
				transform: translateY(-50%);
				pointer-events: none;
				z-index: 10;
				
				.nav-btn {
					position: absolute;
					width: 80rpx;
					height: 80rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					pointer-events: auto;
					transition: all 0.3s ease;
					
					&.nav-prev {
						left: 20rpx;
					}
					
					&.nav-next {
						right: 20rpx;
					}
					
					&.disabled {
						opacity: 0.3;
						pointer-events: none;
					}
					
					&:active {
						transform: scale(0.9);
					}
					
					.nav-icon {
						color: #fff;
						font-size: 48rpx;
						font-weight: bold;
						line-height: 1;
					}
				}
			}
		}
		
		/* 自定义指示器 */
		.custom-indicators {
			position: absolute;
			bottom: 76rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			gap: 16rpx;
			
			.indicator-dot {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.3);
				transition: all 0.3s ease;
				
				&.active {
					background: #27b387;
					transform: scale(1.2);
				}
			}
		}
		
		.template-info {
			position: absolute;
			bottom: 26rpx;
			left: 50%;
			transform: translateX(-50%);
			
			.current-template {
				font-size: 24rpx;
				color: #999;
				background: rgba(255, 255, 255, 0.9);
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			}
		}
	}

	/* 提示文字 */
	.tip-text {
		font-size: 26rpx;
		text-align: center;
		padding-top: 100rpx;
		padding-left: 30rpx;
		color: #333;
	}

	/* 直接分享链接 - 完全参考HTML版本 */
	.direct-share {
		margin-top: 50rpx;
		width: 100%;
		text-align: center;
		
		.share-link {
			color: #333;
			font-size: 14px;
		}
	}

	/* 隐藏元素 - 完全参考HTML版本 */
	.hidden-elements {
		position: absolute;
		left: -9999px;
		top: -9999px;
		opacity: 0;
		pointer-events: none;
		
		.tmp-canvas {
			width: 900px;
			height: 1600px;
			background-color: #ccc;
		}
		
		.qr-canvas {
			width: 300px;
			height: 300px;
			background-color: #ccc;
		}
		
		.qrcode-box {
			display: none;
			
			.qrcode-image {
				width: 300px;
				height: 300px;
				display: block;
			}
		}
	}
</style>